<template>
  <div class="nb-product-list">
    <ul class="nb-product-cate-nav">
      <li
        v-for="item in category"
        :key="item.id"
        :class="{
          'current': currentId === item.id
        }"
        @click="switchCategory(item.id)"
      >{{item.name}}</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      category: [],
      currentId: null
    }
  },
  methods: {
    switchCategory (id) {
      this.currentId = id
      this.$router.push({
        name: 'category',
        params: {
          id
        }
      })
    },
    redirectToCategory () {
      this.$ajax.getCateNav()
        .then(resp => {
          if (resp.data.code === 200) {
            // const hasId = Boolean(this.$route.params.id)
            const hasId = Boolean(this.$route.params.id)
            this.category = resp.data.data.list.slice(1)
            // 如果是直接从mall/id来的，就使用这里的id
            // 如果是从mall来的，就使用响应回来的第2个的id，因为第一个被我们忽略了
            this.currentId = hasId
              ? Number(this.$route.params.id)
              : resp.data.data.list[1].id
            this.$nextTick(() => {
              this.$router.push({
                name: 'category',
                params: {
                  id: this.currentId
                }
              })
            })
          }
        })
    }
  },
  // beforeRouteUpdate (to, from, next) {
  //   if (to.path === '/mall') {
  //     this.redirectToCategory()
  //   } else {
  //     next()
  //   }
  // },
  beforeRouteEnter (to, from, next) {
    // 在这里还没有this, 所以，想要使用this,可以在next里传一个回调
    // 这个回调的参数就是this, 当然你不能把this当成参数往下传，因为是保留关键字
    next(vm => {
      vm.redirectToCategory()
    })
  }

}
</script>

<style scoped lang="scss">
.nb {
  &-product-list {
    display: flex;
    height: 100%;
  }

  &-product-cate-nav {
    width: 80px;
    background-color: #dedede;
    overflow-x: hidden;
    > li {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding-left: 5px;
      border-bottom: 1px solid #FFF;
      border-left: 3px solid transparent;
      color: #666;

      &.current {
        border-left-color: #F00;
        color: #F00;
      }
    }
  }
}
</style>
